<template>
    <div style="clear: both; width: 1600px;" >
        <el-container style="clear: both;">
            <el-header style="height: 20px;margin-top: 5px;">
                <div style="margin-left: 45%;">
                    <div style="float: left;margin-top:20px;margin-right: 15px;"><span style="font-size: 20px;"><b>GSOE</b></span></div>
                    <div style="float: left;"><img style="height: 60px;" src="../../assets/jb.png"></div>
                    <div style="float: left;margin-top: 20px;margin-left: 15px;"><b>{{$t('examView.contest')}}</b></div>
                 </div>
            </el-header>


            <el-main class="main">


                <el-divider />

                <div>
                    <div style="float: left;  margin-left: 40px;width: 130px;">
                        <el-text size="large">id：</el-text>
                        <el-input class="input2" :disabled="disabled" v-model="examParm.id" @change="examList.items=[],examParm.pageNo=1,getExamList()"/>
                    </div>
                    
                    <div style="float: left;margin-top: 5px;"><el-text size="large">{{$t('examView.examName')}}:</el-text></div>
                    <el-input class="input" :disabled="disabled" v-model="examParm.examName" @change="examList.items=[],examParm.pageNo=1,getExamList()"  />

                </div>
                <div style="height: 600px;overflow: auto;"  v-infinite-scroll="load" :infinite-scroll-disabled="disabled" infinite-scroll-distance="100">
                    <el-card class="card"  v-for="(item,index) in examList?.items" :key="index" :style="getBackGround(item.status)" @click="chooseExam=item,clickCard(item.status)">
                        <div style="float: left;">
                            <div style="margin-top: -10px;width: 200px;"><el-text truncated><h1>{{item.examName}}</h1></el-text></div>
                            <p>{{$t('examView.belong')}}：{{item.classBelongName?item.classBelongName:"全校"}}</p>
                        </div>

                        <div style="float: right;">
                            <div style="text-align: right;">
                                <el-tag type="primary" v-if="item.status===1">{{$t('examView.add')}}</el-tag>
                                <el-tag type="success" v-else-if="item.status===2">{{$t('examView.waiting')}}</el-tag>
                                <el-tag type="warning" v-else-if="item.status===3 || item.status===4">{{$t('examView.examing')}}</el-tag>
                                <el-tag type="info" v-else-if="item.status===5">{{$t('examView.end')}}</el-tag>

                                <div v-if="item.status<=3" style="margin-top: 15px;">{{$t('examView.enrollment')}}:{{item.peopleNum}}</div>
                                <div v-if="item.status===4" style="margin-top: 15px;"><el-text type="danger">{{$t('examView.t1')}}</el-text></div>
                            </div>
                            <div style="margin-top: 15px;width: 200px;" v-if="item.getScore">
                                <b :style="getBackGround2(item.allScore,item.getScore)" style="text-align: right;">
                                    <div>{{$t('examView.score')}}:{{item.getScore}}/{{item.allScore}}</div>
                                    <div style="width: 200px;;margin-top: 10px;">
                                        <div style="float: right"><span>{{$t('examView.ranking')}}:{{item.ranking}}/{{item.peopleNum}}</span></div>
                                        <img v-if="item.ranking===1" class="image" src="../../assets/No1.png"/>
                                        <img v-else-if="item.ranking===2" class="image" src="../../assets/No2.png"/>
                                        <img v-else-if="item.ranking===3" class="image" src="../../assets/No3.png"/>
                                    </div>
                                    
                                </b>
                            </div>
                        </div>

                        <div style="float: right;">
                            <div v-if="item.status<=2" style=" width: 220px; margin-top: 15px; font-size: 15px;">
                                <div style="text-align: right;">{{$t('examView.distance')}}：{{item.remaining}} </div>
                            </div>
                        </div>

                        <div style="clear: both;width: 600px;"><p>{{$t('examView.examTime')}}：{{item.beginTime}} - {{item.endTime}}</p></div>
                    </el-card>
                    
                </div>

            </el-main>  


            <el-footer style="height: 10px;">
                <div style="clear: both;text-align: center; margin-top: -15px;"><el-button link @click="load()">{{tips}}</el-button></div>
            </el-footer>
        </el-container>



    </div>

    <el-dialog v-model="showJoinExamDialog" width="500px" style="text-align: center;">
        <h1>{{chooseExam.examName}}</h1>
        <el-form>
            <el-form-item label="id：">{{chooseExam.id}}</el-form-item>
            <el-form-item label="总分：">{{chooseExam.score}}</el-form-item>
            <el-form-item label="总时长：">{{chooseExam.validity}}</el-form-item>
            <el-form-item label="开始时间：">{{chooseExam.beginTime}}</el-form-item>
            <el-form-item label="结束时间：">{{chooseExam.endTime}}</el-form-item>
            <el-form-item label="报名须知："><el-input type="textarea" v-model="chooseExam.notes" disabled :rows="3"></el-input></el-form-item>
        </el-form>

        <div style="text-align: center;">
            <el-button type="success" v-if="chooseExam.status===1 || chooseExam.status===3" @click="signUpExam()">报名</el-button>
            <el-button type="danger" v-if="chooseExam.status===2" @click="cancelExam()">取消报名</el-button>
            <el-button type="primary" v-if="chooseExam.status===4" @click="$router.push(`/examing/${chooseExam.id}`)">进入考试</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
    import useExam from '@/hooks/useExam';
    import {usedarkStore} from '@/stone/index'
    import { onUnmounted } from 'vue';
    import { onMounted } from 'vue';
    import { watch,ref } from 'vue';
    const darkStore=usedarkStore();
    const {dark,examList,examParm,disabled,tips,showJoinExamDialog,chooseExam,
        cancelExam,signUpExam,getRemainingTime,clickCard,getBackGround,getBackGround2,load,getExamList}= useExam();


    watch(darkStore,()=>{
        dark.value=darkStore.dark
    })
    let interval;
    onMounted(()=>{
        interval=setInterval(()=>{
            if(examList.value.items && examList.value.items.length>0){
                for(let i =0 ;i<examList.value.items.length;i++){
                    getRemainingTime(i)
                }
            }
        },1000)
    })

    onUnmounted(()=>{
        clearInterval(interval)
    })

</script>


<style scoped>

        .image{
            float: right;
            width: 30px;
        }

        .input{
            
            margin-left: 10px;
            width: 100px;
        }

        .input2{
            margin-left: 10px;
            width: 80px;
            height: 30px;
        }

        
        .card{
            margin-top: 30px;
            float: left;
            margin-left: 30px;
            width: 460px;
            height: 163px;
            opacity: 0;
            transform: translateY(20px);
            animation: slideIn 0.7s ease-out forwards 0.5s;
            transition: transform 0.3s ease !important;
            cursor: pointer;
        }
        .card:hover {
            transform: translateY(-10px) !important;
        }

    
    @keyframes slideIn {
        to {
            transform: translateY(0px);
            opacity: 1;
        }
    }



</style>